/**
 * 新建分组
 * 编辑分组
 */

 import React,{PropTypes,Component,PureComponent} from 'react';
 import {Select ,Button ,Radio,Modal, Form, Input,Row,Col,message } from 'antd';
 import { connect } from 'react-redux';

 const FormItem = Form.Item;

 const NewPolicyGroupingForm = Form.create()(
  (props) => {
  const { visible, onCancel, onCreate, form ,type ,groupName,isPublic} = props;
  const { getFieldDecorator } = form;
  return (
    visible?
     <Modal
      visible={visible}
      title={type==='edit'?'编辑分组':'新增分组'}
      okText="确定"
      onCancel={onCancel}
      onOk={onCreate}
     >
       <Form layout="vertical">
         <FormItem label="分组名称">
           {getFieldDecorator('groupingName', {
             initialValue: groupName,
             rules: [
               { required: true, whitespace: true, message: '请输入分组名称!' },
             ],
           })(
             <Input placeholder="请输入分组名称"/>,
             )}
         </FormItem>
         <FormItem label="是否公开">
           {getFieldDecorator('isPublic', {
              initialValue: isPublic,
              rules: [
                { required: true, message: '请选择权限分组!' },
              ],
           })(
             <Radio.Group>
                <Radio value="Y">是</Radio>
                <Radio value="N">否</Radio>
              </Radio.Group>
            )}
         </FormItem>
       </Form>
     </Modal> : null
   );
 }
)


const mapStateToProps = state => ({
});
const mapDispatchToProps = {
  addPolicyGroup: query => ({
    type: 'myattention/addPolicyGroup',
    payload: query || {},
  }),
  updatePolicyGroup: query => ({
    type: 'myattention/updatePolicyGroup',
    payload: query || {},
  })
};

@connect( null,mapDispatchToProps)
class NewPolicyGrouping extends PureComponent {

 static propTypes = {
   form: PropTypes.object.isRequired,
   addPolicyGroup: PropTypes.func.isRequired,
   updatePolicyGroup:PropTypes.func.isRequired,
 }
 constructor(props) {
   super(props);
   this.state = {
     visible: false,
   };
 }
 showModal = () => {
   const {groupName,groupNumber} = this.props;
   if(groupName == '' || groupNumber == ''){
     message.warning('请先选择分组')
     this.setState({ visible: false });
   }else{
     this.setState({ visible: true });
   }

 }

 handleCancel = () => {
   this.setState({ visible: false });
 }

 handleCreate = () => {
   const form = this.form;
   const { addPolicyGroup,updatePolicyGroup,edit,groupNumber } = this.props;
   form.validateFields((err, values) => {
     if (err) {
       return;
     }
     if(edit){
       updatePolicyGroup({
          "groupName":values.groupingName,
          "isPublic":values.isPublic,
          "groupNumber":groupNumber
       })
     }else{
       addPolicyGroup({
          "groupName":values.groupingName,
          "isPublic":values.isPublic,
       })
     }
     form.resetFields();
     this.setState({ visible: false });
   });
 }

 saveFormRef = (form) => {
   this.form = form;
 }
 render() {
   const {type,groupName,groupNumber,isPublic} = this.props;
   return (
     <div>
       <Button type="primary" onClick={this.showModal}>{type==='edit'?'编辑分组':'新增分组'}</Button>
       <NewPolicyGroupingForm
         ref={this.saveFormRef}
         visible={this.state.visible}
         onCancel={this.handleCancel}
         onCreate={this.handleCreate}
         type={this.props.type}
         groupName={this.props.groupName}
         isPublic={this.props.isPublic}
       />
     </div>
   );
 }
}
export default Form.create({
})(NewPolicyGrouping);
